<template>
  <div>
    <slot :validate="validate" />
    <div class="err">{{ errMsg }}</div>
  </div>
</template>

<script>
export default {
  props: ['rules', 'value'],
  data() {
    return {
      errMsg: ''
    }
  },
  methods: {
    validate() {
      const validateStatus = this.rules.reduce((pre, cur) => {
        const check = cur && cur.test && cur.test(this.value)
        this.errMsg = check ? '' : cur.message
        return pre && check
      }, true)
      return validateStatus
    }
  }
}
</script>

<style>
 .err{
   font-size: 8px;
   color: red;
   height: 15px;
   line-height: 15px;
   padding: 0px;
 }
</style>
